
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IconFont</title>
<link rel="stylesheet" href="./font-awesome.css">
<link rel="stylesheet" href="./demo.css">
<link href="./basic.css" rel="stylesheet" type="text/css">
<link href="./style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./jquery-3.2.1.min.js"></script>

<style type="text/css">
.divFont {
	width: 105px;
	font-size: medium;
	color: white;
	background-color: #8aabe5;
	text-align: center;
	font-weight: 600;
}

.nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: 3em;
}

.nav a {
	display: block;
	width: 10em;
	font-size: medium;
	color: #551A8B;
	text-align: center;
	text-decoration: none;
	background-color: #999999d4;
}

.nav a:hover {
	background-color: #969896;
}
.left-nav {
	position: fixed
}

.left-nav ul {
	width: 180px;
}

/*  消息提示框*/
.showMessage {
	padding: 5px 10px;
	border-radius: 5px;
	position: fixed;
	top: 45%;
	left: 45%;
	color: #ffffff;
}

.showMessageSuccess {
	background-color: #00B7EE;
}
</style>


<script type="text/javascript">
$(function () {
	window.scrollType=true;
	/*  $(document).scroll(function(){//监听滚动事件
		
	});  */
	windowAddMouseWheel()
	function windowAddMouseWheel() {
	    var scrollFunc = function (e) {
	        e = e || window.event;
	    if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
		    if (e.wheelDelta > 0) { //当滑轮向上滚动时
		    	window.scrollType=true;
		    }
		    if (e.wheelDelta < 0) { //当滑轮向下滚动时
		    	window.scrollType=true;
		    }
	    } else if (e.detail) {  //Firefox滑轮事件
		    if (e.detail> 0) { //当滑轮向上滚动时
		    	window.scrollType=true;
		    }
		    if (e.detail< 0) { //当滑轮向下滚动时
		    	window.scrollType=true;
		    }
	    }
	};
				    //给页面绑定滑轮滚动事件
	if (document.addEventListener) { //火狐使用DOMMouseScroll绑定
		document.addEventListener('DOMMouseScroll', scrollFunc, false);
	}
					//其他浏览器直接绑定滚动事件
	window.onmousewheel = document.onmousewheel = scrollFunc;

	}			
	 window.onscroll = function (){
		if(window.scrollType){
			//已经滚动的高度+一个合理值
			var nScrollTop = $(document).scrollTop()+350;
			//所有ul高度的数组
			var arrHeight = getHeight($('.icon_lists'));
			var b = '';
			$.each(arrHeight,function(index,value){
				//已经滚动的高度和几个ul的高度进行比较
				if(nScrollTop < value){
					b = index;
					return false;
				}
			});
			$('.left-nav ul li').children('a').removeClass('hover');
		    $('.left-nav ul li').eq(b).children('a').addClass('hover');
			$('#lanPos').css('top', $('.left-nav ul li').eq(b).offset().top-$('.left-nav').offset().top);
		}
	 }
	 
	$('#container i').each(function () {
		$(this).addClass("fa-2x");
	})
	$('#container li').dblclick(function () {
		const input = document.createElement('input');
		document.body.appendChild(input);
		const text =$(this).children('div').text();
		const value ='fa '+text;
		input.setAttribute('value',value );
		input.select();
		if (document.execCommand('copy')) {
			document.execCommand('copy');
		}
		document.body.removeChild(input); 
		showMessage(value+" 复制成功！");
	})



    $('#lanPos').css('top', $('.left-nav .hover').offset().top-$('.left-nav').offset().top);
	$('.left-nav ul li').hover(function () {
		$('#lanPos').css('top', $(this).offset().top-$('.left-nav').offset().top);
	}, function () {
		$('#lanPos').css('top', $('.left-nav .hover').offset().top-$('.left-nav').offset().top);
	})

	$('.left-nav ul li').click(function () {
		for (var i = 0; i < $('.left-nav ul li').length; i++) {
			if (this == $('.left-nav ul li').get(i)) {
				$('.left-nav ul li').eq(i).children('a').addClass('hover');
				var param=$('.left-nav ul li').eq(i).children('a').attr('id')+"Li";
				$("html,body").animate({scrollTop: $("#" + param).offset().top}, 200);
			} else {
				$('.left-nav ul li').eq(i).children('a').removeClass('hover');
			}
		}
		window.scrollType=false;
	})
})

function prevent (e) {
　　e.preventDefault();
}

function getHeight(mc_shop) {
	var arr =  new Array();
	mc_shop.each(function (index,element) {
		if(index == 0){
			arr[index] = $(element).height();
		}else {
			arr[index] = arr[index-1] + $(element).height();
		}
	});
	return arr;
}

/**
 * 弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒
 * 后面的消息会覆盖原来的消息
 * @param message：待显示的消息
 * 
 */
function showMessage(message) {
  let messageJQ = $("<div class='showMessage'>" + message + "</div>");
  messageJQ.addClass("showMessageSuccess");
  /**先将原始隐藏，然后添加到页面，最后以600秒的速度下拉显示出来*/
  messageJQ.hide().appendTo("body").slideDown(600);
  /**3秒之后自动删除生成的元素*/
 window.setTimeout(function () {
    messageJQ.remove();
  }, 2000); 
}

</script>



</head>

<body>
	<div class="main">


		<div class="left-nav">
			<ul>
				<li><a class="hover" id="divCy" href="javascript:void(0)"">常用图标</a>
				</li>
				<li><a id="divBd" href="javascript:void(0)"">表单类图标</a></li>
				<!--   <li>
                <a id="divTb" href="javascript:void(0)"">图表类图标</a>
            </li> -->
				<li><a id="divSs" href="javascript:void(0)"">手势图标</a></li>
				<li><a id="divYl" href="javascript:void(0)"">医疗图标</a></li>
				<!-- <li>
                <a id="divFk" href="javascript:void(0)"">付款图标</a>
            </li> -->
				<li><a id="divJz" href="javascript:void(0)"">加载中图标</a></li>
				<li><a id="divWb" href="javascript:void(0)"">文本图标</a></li>

				<li><a id="divJt" href="javascript:void(0)"">交通工具图标</a></li>
				<li><a id="divYp" href="javascript:void(0)"">音视/频图标</a></li>
				<li><a id="divFx" href="javascript:void(0)"">方向图标</a></li>
				<li><a id="divQt" href="javascript:void(0)"">其他图标</a></li>
				<div id="lanPos"></div>
			</ul>
		</div>
		<div id="container" style="margin-left: 180px">
			<ul class="icon_lists clear">
				<div id="divCyLi" class="divFont">常用图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
				<li><i class="fa fa-file"></i>
					<div class="name">fa-file</div></li>
					<li><i class="fa fa-align-justify"></i>
					<div class="name">fa-align-justify</div></li>
					<li><i class="fa fa-edit"></i>
					<div class="name">fa-edit</div></li>
					<li><i class="fa fa-arrow-circle-o-up"></i>
					<div class="name">fa-arrow-circle-o-up</div></li>
					<li><i class="fa fa-search"></i>
					<div class="name">fa-search</div></li>
					<li><i class="fa fa-folder"></i>
					<div class="name">fa-folder</div></li>
					<li><i class="fa fa-folder-open"></i>
					<div class="name">fa-folder-open</div></li>
					<li><i class="fa fa-floppy-o"></i>
					<div class="name">fa-floppy-o</div></li>
					<li><i class="fa fa-bell-o"></i>
					<div class="name">fa-bell-o</div></li>
					<li><i class="fa fa-bookmark"></i>
					<div class="name">fa-bookmark</div></li>
					<li><i class="fa fa-calendar"></i>
					<div class="name">fa-calendar</div></li>
					<li><i class="fa fa-camera"></i>
					<div class="name">fa-camera</div></li>
				<li><i class="fa fa-arrow-circle-up"></i>
					<div class="name">fa-arrows</div></li>
				<li><i class="fa fa-arrows-alt"></i>
				<li><i class="fa fa-book"></i>
					<div class="name">fa-book</div></li>
					<li><i class="fa fa-ban"></i>
					<div class="name">fa-ban</div></li>
					<li><i class="fa fa-asterisk"></i>
					<div class="name">fa-asterisk</div></li>
						<li><i class="fa fa-bug"></i>
					<div class="name">fa-bug</div></li>
					<li><i class="fa fa-caret-down"></i>
					<div class="name">fa-caret-down</div></li>
				<li><i class="fa fa-font"></i>
					<div class="name">fa-font</div></li>
				<li><i class="fa fa-forward"></i>
					<div class="name">fa-forward</div></li>
						<li><i class="fa fa-comment"></i>
					<div class="name">fa-comment</div></li>
						<li><i class="fa fa-envelope-o"></i>
					<div class="name">fa-envelope-o</div></li>
				<li><i class="fa fa-check-square-o"></i>
					<div class="name">fa-check-square-o</div></li>
					<li><i class="fa fa-download"></i>
					<div class="name">fa-download</div></li>
					<li><i class="fa fa-child"></i>
				
			</ul>

			<ul class="icon_lists clear">
				<div id="divBdLi" class="divFont">表单类图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

				<li><i class="fa  fa-check"></i>
					<div class="name">fa-check</div></li>
				<li><i class="fa fa-check-circle"></i>
					<div class="name">fa-check-circle</div></li>

				<li><i class="fa  fa-check-square"></i>
					<div class="name">fa-check-square</div></li>
				

				<li><i class="fa fa-minus"></i>
					<div class="name">fa-minus</div></li>
				<li><i class="fa fa-minus-circle"></i>
					<div class="name">fa-minus-circle</div></li>
				<li><i class="fa  fa-minus-square"></i>
					<div class="name">fa-minus-square</div></li>
				<li><i class="fa fa-minus-square-o"></i>
					<div class="name">fa-minus-square-o</div></li>


				<li><i class="fa  fa-search"></i>
					<div class="name">fa-search</div></li>
				<li><i class="fa  fa-search-minus"></i>
					<div class="name">fa-search-minus</div></li>
				<li><i class="fa  fa-search-plus"></i>
					<div class="name">fa-search-plus</div></li>


				<li><i class="fa fa-file-archive-o"></i>
					<div class="name">fa-file-archive-o</div></li>
				<li><i class="fa fa-circle"></i>
					<div class="name">fa-circle</div></li>
				<li><i class="fa fa-circle-o"></i>
					<div class="name">fa-circle-o</div></li>
				<li><i class="fa  fa-dot-circle-o"></i>
					<div class="name">fa-dot-circle-o</div></li>

			</ul>

			<!-- 	<ul class="icon_lists clear">
					<div id="divTbLi" class="divFont">图表图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
				<li><i class="fa fa-area-chart"></i>
                    <div class="name">fa-area-chart</div></li>
                    <li><i class="fa fa-bar-chart"></i>
                    <div class="name">fa-bar-chart</div></li>
                    <li><i class="fa fa-line-chart"></i>
                    <div class="name">fa-line-chart</div></li>
                    <li><i class="fa fa-pie-chart"></i>
                    <div class="name">fa-pie-chart</div></li>
				</ul>	 -->

			<ul class="icon_lists clear">
				<div id="divSsLi" class="divFont">手势图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

				<li><i class="fa fa-hand-o-down"></i>
					<div class="name">fa-hand-o-down</div></li>
				<li><i class="fa  fa-hand-o-left"></i>
					<div class="name">fa-hand-o-left</div></li>
				<li><i class="fa fa-hand-o-right"></i>
					<div class="name">fa-hand-o-right</div></li>
				<li><i class="fa  fa-hand-o-up"></i>
					<div class="name">fa-hand-o-up</div></li>
				<li><i class="fa  fa-rocket"></i>
					<div class="name">fa-rocket</div></li>
				<li><i class="fa  fa-thumbs-down"></i>
					<div class="name">fa-thumbs-down</div></li>
				<li><i class="fa  fa-thumbs-o-down"></i>
					<div class="name">fa-thumbs-o-down</div></li>
				<li><i class="fa  fa-thumbs-o-up"></i>
					<div class="name">fa-thumbs-o-up</div></li>
				<li><i class="fa  fa-thumbs-up"></i>
					<div class="name">fa-thumbs-up</div></li>
			</ul>

			<ul class="icon_lists clear">
				<div id="divYlLi" class="divFont">医疗图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

				<li><i class="fa  fa-ambulance"></i>
					<div class="name">fa-ambulance</div></li>
				<li><i class="fa fa-h-square"></i>
					<div class="name">fa-h-square</div></li>
				<li><i class="fa  fa-heart"></i>
					<div class="name">fa-heart</div></li>
				<li><i class="fa fa-heart-o"></i>
					<div class="name">fa-heart-o</div></li>
				<li><i class="fa  fa-hospital-o"></i>
					<div class="name">fa-hospital-o</div></li>
				<li><i class="fa fa-medkit"></i>
					<div class="name">fa-medkit</div></li>
				<li><i class="fa  fa-plus-square"></i>
					<div class="name">fa-plus-square</div></li>
				<li><i class="fa   fa-stethoscope"></i>
					<div class="name">fa-stethoscope</div></li>
				<li><i class="fa   fa-user-md"></i>
					<div class="name">fa-user-md</div></li>
				<li><i class="fa   fa-wheelchair"></i>
					<div class="name">fa-wheelchair</div></li>
			</ul>

			<!-- 		<ul class="icon_lists clear">
				<div id="divFkLi" class="divFont">付款图标</div>
				<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
			
			<li><i class="fa  fa-cc-amex"></i>
                            <div class="name"> fa-cc-amex</div></li>
                        <li><i class="fa fa-cc-discover"></i>
                            <div class="name">fa-cc-discover</div></li>
                        <li><i class="fa  fa-cc-mastercard"></i>
                            <div class="name"> fa-cc-mastercard</div></li>
                        <li><i class="fa fa-cc-paypal"></i>
                            <div class="name">fa-cc-paypal</div></li>
                        <li><i class="fa fa-cc-stripe"></i>
                            <div class="name">fa-cc-stripe</div></li>
                        <li><i class="fa  fa-cc-visa"></i>
                            <div class="name"> fa-cc-visa</div></li>
                        <li><i class="fa fa-credit-card"></i>
                            <div class="name">fa-credit-card</div></li>
                        <li><i class="fa  fa-google-wallet"></i>
                            <div class="name"> fa-google-wallet</div></li>
                        <li><i class="fa  fa-paypal"></i>
                            <div class="name">  fa-paypal</div></li>
                            
			</ul> -->

			<ul class="icon_lists clear">
				<div id="divJzLi" class="divFont">加载中图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
				<li><i class="fa fa-circle-o-notch"></i>
					<div class="name">fa-circle-o-notch</div></li>

				<li><i class="fa fa-gear"></i>
					<div class="name">fa-gear</div></li>
				<li><i class="fa fa-refresh"></i>
					<div class="name">fa-refresh</div></li>
				<li><i class="fa  fa-spinner"></i>
					<div class="name">fa-spinner</div></li>
			</ul>

			<ul class="icon_lists clear">
				<div id="divWbLi" class="divFont">文本图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
				<li><i class="fa fa-align-center"></i>
					<div class="name">fa-align-center</div></li>
				<li><i class="fa fa-align-justify"></i>
					<div class="name">fa-align-justify</div></li>
				<li><i class="fa fa-align-left"></i>
					<div class="name">fa-align-left</div></li>
				<li><i class="fa fa-align-right"></i>
					<div class="name">fa-align-right</div></li>
				<li><i class="fa fa-bold"></i>
					<div class="name">fa-bold</div></li>
				<li><i class="fa fa-chain"></i>
					<div class="name">fa-chain</div></li>
				<li><i class="fa fa-chain-broken"></i>
					<div class="name">fa-chain-broken</div></li>
				<li><i class="fa fa-clipboard"></i>
					<div class="name">fa-clipboard</div></li>

				<li><i class="fa fa-columns"></i>
					<div class="name">fa-columns</div></li>
				<li><i class="fa fa-copy"></i>
					<div class="name">fa-copy</div></li>
				<li><i class="fa fa-cut"></i>
					<div class="name">fa-cut</div></li>
				<li><i class="fa fa-dedent"></i>
					<div class="name">fa-dedent</div></li>
				<li><i class="fa fa-bold"></i>
					<div class="name">fa-bold</div></li>
				<li><i class="fa fa-eraser"></i>
					<div class="name">fa-eraser</div></li>
				<li><i class="fa fa-file"></i>
					<div class="name">fa-file</div></li>
				<li><i class="fa fa-file-o"></i>
					<div class="name">fa-file-o</div></li>

				<li><i class="fa fa-file-text"></i>
					<div class="name">fa-file-text</div></li>
				<li><i class="fa fa-file-text-o"></i>
					<div class="name">fa-file-text-o</div></li>
				<li><i class="fa fa-files-o"></i>
					<div class="name">fa-files-o</div></li>
				<li><i class="fa fa-font"></i>
					<div class="name">fa-font</div></li>
				<li><i class="fa fa-header"></i>
					<div class="name">fa-header</div></li>
				<li><i class="fa fa-indent"></i>
					<div class="name">fa-indent</div></li>
				<li><i class="fa fa-italic"></i>
					<div class="name">fa-italic</div></li>
				<li><i class="fa fa-link"></i>
					<div class="name">fa-link</div></li>

				<li><i class="fa fa-list"></i>
					<div class="name">fa-list</div></li>
				<li><i class="fa fa-list-alt"></i>
					<div class="name">fa-list-alt</div></li>
				<li><i class="fa fa-list-ol"></i>
					<div class="name">fa-list-ol</div></li>
				<li><i class="fa fa-list-ul"></i>
					<div class="name">fa-list-ul</div></li>
				<li><i class="fa fa-outdent"></i>
					<div class="name">fa-outdent</div></li>
				<li><i class="fa fa-paperclip"></i>
					<div class="name">fa-paperclip</div></li>
				<li><i class="fa fa-paragraph"></i>
					<div class="name">fa-paragraphc</div></li>
				<li><i class="fa fa-paste"></i>
					<div class="name">fa-paste</div></li>
				<li><i class="fa fa-repeat"></i>
					<div class="name">fa-repeat</div></li>
				<li><i class="fa fa-rotate-left"></i>
					<div class="name">fa-rotate-left</div></li>
				<li><i class="fa fa-save"></i>
					<div class="name">fa-save</div></li>
				<li><i class="fa fa-scissors"></i>
					<div class="name">fa-scissors</div></li>
				<li><i class="fa fa-strikethrough"></i>
					<div class="name">fa-strikethrough</div></li>
				<li><i class="fa fa-subscript"></i>
					<div class="name">fa-subscript</div></li>
				<li><i class="fa fa-table"></i>
					<div class="name">fa-table</div></li>
				<li><i class="fa fa-text-height"></i>
					<div class="name">fa-text-height</div></li>
				<li><i class="fa fa-text-width"></i>
					<div class="name">fa-text-width</div></li>
				<li><i class="fa fa-th"></i>
					<div class="name">fa-th</div></li>
				<li><i class="fa fa-th-large"></i>
					<div class="name">fa-th-large</div></li>
				<li><i class="fa fa-th-list"></i>
					<div class="name">fa-th-list</div></li>
				<li><i class="fa fa-undo"></i>
					<div class="name">fa-undo</div></li>
				<li><i class="fa fa-unlink"></i>
					<div class="name">fa-unlink</div></li>
			</ul>

			<ul class="icon_lists clear">
				<div id="divJtLi" class="divFont">交通工具图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
				<li><i class="fa fa-ambulance"></i>
					<div class="name">fa-ambulance</div></li>
				<li><i class="fa fa-automobile"></i>
					<div class="name">fa-automobile</div></li>

				<li><i class="fa fa-cab"></i>
					<div class="name">fa-cab</div></li>
				<li><i class="fa fa-car"></i>
					<div class="name">fa-car</div></li>
				<li><i class="fa fa-fighter-jet"></i>
					<div class="name">fa-fighter-jet</div></li>
				<li><i class="fa  fa-plane"></i>
					<div class="name">fa-plane</div></li>
				<li><i class="fa fa-rocket"></i>
					<div class="name">fa-rocket</div></li>
				<li><i class="fa  fa-space-shuttle"></i>
					<div class="name">fa-space-shuttle</div></li>
				<li><i class="fa fa-taxi"></i>
					<div class="name">fa-taxi</div></li>
				<li><i class="fa  fa-truck"></i>
					<div class="name">fa-truck</div></li>
				<li><i class="fa  fa-wheelchair"></i>
					<div class="name">fa-wheelchair</div></li>

			</ul>

			<ul class="icon_lists clear">
				<div id="divYpLi" class="divFont">音/视频图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

				<li><i class="fa fa-arrows-alt"></i>
					<div class="name">fa-arrows-alt</div></li>
				<li><i class="fa fa-backward"></i>
					<div class="name">fa-backward</div></li>
				<li><i class="fa fa-compress"></i>
					<div class="name">fa-compress</div></li>
				<li><i class="fa  fa-eject"></i>
					<div class="name">fa-eject</div></li>
				<li><i class="fa fa-expand"></i>
					<div class="name">fa-expand</div></li>
				<li><i class="fa fa-fast-backward"></i>
					<div class="name">fa-fast-backward</div></li>
				<li><i class="fa fa-fast-forward"></i>
					<div class="name">fa-fast-forward</div></li>
				<li><i class="fa  fa-forward"></i>
					<div class="name">fa-forward</div></li>
				<li><i class="fa  fa-pause"></i>
					<div class="name">fa-pause</div></li>
				<li><i class="fa  fa-play"></i>
					<div class="name">fa-play</div></li>
				<li><i class="fa fa-play-circle"></i>
					<div class="name">fa-play-circle</div></li>
				<li><i class="fa fa-play-circle-o"></i>
					<div class="name">fa-play-circle-o</div></li>
				<li><i class="fa fa-step-backward"></i>
					<div class="name">fa-step-backward</div></li>
				<li><i class="fa  fa-step-forward"></i>
					<div class="name">fa-step-forward</div></li>
				<li><i class="fa  fa-stop"></i>
					<div class="name">fa-stop</div></li>
				<li><i class="fa  fa-youtube-play"></i>
					<div class="name">fa-youtube-play</div></li>
					<li><i class="fa fa-cloud-upload"></i>
					<div class="name">fa-cloud-upload</div></li>

			</ul>

			<ul class="icon_lists clear">
				<div id="divFxLi" class="divFont">方向图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

				<li><i class="fa  fa-angle-down"></i>
					<div class="name">fa-angle-down</div></li>
				<li><i class="fa  fa-angle-left"></i>
					<div class="name">fa-angle-left</div></li>
				<li><i class="fa fa-angle-right"></i>
					<div class="name">fa-angle-right</div></li>
				<li><i class="fa  fa-angle-up"></i>
					<div class="name">fa-angle-up</div></li>

				<li><i class="fa fa-angle-double-down"></i>
					<div class="name">fa-angle-double-down</div></li>
				<li><i class="fa fa-angle-double-left"></i>
					<div class="name">fa-angle-double-left</div></li>
				<li><i class="fa fa-angle-double-right"></i>
					<div class="name">fa-angle-double-right</div></li>
				<li><i class="fa fa-angle-double-up"></i>
					<div class="name">fa-angle-double-right</div></li>

				<li><i class="fa fa-angle-double-down"></i>
					<div class="name">fa-angle-double-down</div></li>
				<li><i class="fa fa-angle-double-left"></i>
					<div class="name">fa-angle-double-left</div></li>
				<li><i class="fa fa-angle-double-right"></i>
					<div class="name">fa-angle-double-right</div></li>
				<li><i class="fa fa-angle-double-up"></i>
					<div class="name">fa-angle-double-up</div></li>

				<li><i class="fa fa-arrow-circle-down"></i>
					<div class="name">fa-arrow-circle-down</div></li>
				<li><i class="fa fa-arrow-circle-left"></i>
					<div class="name">fa-arrow-circle-left</div></li>
				<li><i class="fa fa-arrow-circle-right"></i>
					<div class="name">fa-arrow-circle-right</div></li>
				<li><i class="fa fa-arrow-circle-up"></i>
					<div class="name">fa-arrow-circle-up</div></li>

				<li><i class="fa fa-arrow-circle-o-down"></i>
					<div class="name">fa-arrow-circle-o-down</div></li>
				<li><i class="fa fa-arrow-circle-o-left"></i>
					<div class="name">fa-arrow-circle-o-left</div></li>
				<li><i class="fa fa-arrow-circle-o-right"></i>
					<div class="name">fa-arrow-circle-o-right</div></li>
				<li><i class="fa fa-arrow-circle-o-up"></i>
					<div class="name">fa-arrow-circle-o-up</div></li>

				<li><i class="fa fa-arrow-down"></i>
					<div class="name">fa-arrow-down</div></li>
				<li><i class="fa fa-arrow-left"></i>
					<div class="name">fa-arrow-left</div></li>
				<li><i class="fa fa-arrow-right"></i>
					<div class="name">fa-arrow-right</div></li>
				<li><i class="fa fa-arrow-up"></i>
					<div class="name">fa-arrow-up</div></li>


				<li><i class="fa fa-arrows"></i>
					<div class="name">fa-arrows</div></li>
			
				<li><i class="fa fa-arrows-h"></i>
					<div class="name">fa-arrows-h</div></li>
				<li><i class="fa fa-arrows-v"></i>
					<div class="name">fa-arrows-v</div></li>

				<li><i class="fa fa-caret-down"></i>
					<div class="name">fa-caret-down</div></li>
				<li><i class="fa fa-caret-left"></i>
					<div class="name">fa-caret-left</div></li>
				<li><i class="fa fa-caret-right"></i>
					<div class="name">fa-caret-right</div></li>
				<li><i class="fa fa-caret-up"></i>
					<div class="name">fa-caret-up</div></li>

				<li><i class="fa fa-caret-square-o-down"></i>
					<div class="name">fa-caret-square-o-down</div></li>
				<li><i class="fa fa-caret-square-o-left"></i>
					<div class="name">fa-caret-square-o-left</div></li>
				<li><i class="fa fa-caret-square-o-right"></i>
					<div class="name">fa-caret-square-o-right</div></li>
				<li><i class="fa fa-caret-square-o-up"></i>
					<div class="name">fa-caret-square-o-up</div></li>

				<li><i class="fa fa-chevron-circle-down"></i>
					<div class="name">fa-chevron-circle-down</div></li>
				<li><i class="fa fa-chevron-circle-left"></i>
					<div class="name">fa-chevron-circle-left</div></li>
				<li><i class="fa fa-chevron-circle-right"></i>
					<div class="name">fa-chevron-circle-right</div></li>
				<li><i class="fa fa-chevron-circle-up"></i>
					<div class="name">fa-chevron-circle-up</div></li>

				<li><i class="fa fa-chevron-down"></i>
					<div class="name">fa-chevron-down</div></li>
				<li><i class="fa fa-chevron-left"></i>
					<div class="name">fa-chevron-left</div></li>
				<li><i class="fa fa-chevron-right"></i>
					<div class="name">fa-chevron-right</div></li>
				<li><i class="fa fa-chevron-up"></i>
					<div class="name">fa-chevron-up</div></li>

				<li><i class="fa fa-hand-o-down"></i>
					<div class="name">fa-hand-o-down</div></li>
				<li><i class="fa fa-hand-o-left"></i>
					<div class="name">fa-hand-o-left</div></li>
				<li><i class="fa fa-hand-o-right"></i>
					<div class="name">fa-hand-o-right</div></li>
				<li><i class="fa fa-hand-o-up"></i>
					<div class="name">fa-hand-o-up</div></li>

				<li><i class="fa fa-long-arrow-down"></i>
					<div class="name">fa-long-arrow-down</div></li>
				<li><i class="fa fa-long-arrow-left"></i>
					<div class="name">fa-long-arrow-left</div></li>
				<li><i class="fa fa-long-arrow-right"></i>
					<div class="name">fa-long-arrow-right</div></li>
				<li><i class="fa fa-long-arrow-up"></i>
					<div class="name">fa-long-arrow-up</div></li>


				<li><i class="fa fa-toggle-down"></i>
					<div class="name">fa-toggle-down</div></li>
				<li><i class="fa fa-toggle-left"></i>
					<div class="name">fa-toggle-left</div></li>
				<li><i class="fa fa-toggle-right"></i>
					<div class="name">fa-toggle-right</div></li>
				<li><i class="fa fa-toggle-up"></i>
					<div class="name">fa-toggle-up</div></li>
			</ul>
			<ul class="icon_lists clear">
				<div id="divQtLi" class="divFont">其他图标</div>
				<div
					style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

				<li><i class="fa fa-caret-left"></i>
					<div class="name">fa-caret-left</div></li>
				<li><i class="fa fa-caret-right"></i>
					<div class="name">fa-caret-right</div></li>
				<li><i class="fa fa-caret-up"></i>
					<div class="name">fa-caret-up</div></li>
				<li><i class="fa fa-caret-square-o-down"></i>
					<div class="name">fa-caret-square-o-down</div></li>
				<li><i class="fa fa-caret-square-o-left"></i>
					<div class="name">fa-caret-square-o-left</div></li>
				<li><i class="fa fa-caret-square-o-right"></i>
					<div class="name">fa-caret-square-o-right</div></li>
				<li><i class="fa fa-caret-square-o-up"></i>
					<div class="name">fa-caret-square-o-up</div></li>
				<li><i class="fa fa-certificate"></i>
					<div class="name">fa-certificate</div></li>
				<li><i class="fa fa-chain"></i>
					<div class="name">fa-chain</div></li>
				<li><i class="fa fa-check"></i>
					<div class="name">fa-check</div></li>
				<li><i class="fa fa-chain-broken"></i>
					<div class="name">fa-chain-broken</div></li>
				<li><i class="fa fa-check-circle"></i>
					<div class="name">fa-check-circle</div></li>
				<li><i class="fa fa-check-circle-o"></i>
					<div class="name">fa-check-circle-o</div></li>
				<li><i class="fa fa-check-square"></i>
					<div class="name">fa-check-square</div></li>
				<li><i class="fa fa-check-square-o"></i>
					<div class="name">fa-check-square-o</div></li>
				<li><i class="fa fa-chevron-circle-down"></i>
					<div class="name">fa-chevron-circle-down</div></li>
				<li><i class="fa fa-chevron-circle-left"></i>
					<div class="name">fa-chevron-circle-left</div></li>
				<li><i class="fa fa-chevron-circle-right"></i>
					<div class="name">fa-chevron-circle-right</div></li>
				<li><i class="fa fa-chevron-circle-up"></i>
					<div class="name">fa-chevron-circle-up</div></li>
				<li><i class="fa fa-chevron-down"></i>
					<div class="name">fa-chevron-down</div></li>
				<li><i class="fa fa-chevron-left"></i>
					<div class="name">fa-chevron-left</div></li>
				<li><i class="fa fa-chevron-right"></i>
					<div class="name">fa-chevron-right</div></li>
				<li><i class="fa fa-chevron-up"></i>
					<div class="name">fa-chevron-up</div></li>
				
				<li><i class="fa fa-circle"></i>
					<div class="name">fa-circle</div></li>
				<li><i class="fa fa-circle-o"></i>
					<div class="name">fa-circle-o</div></li>
				<li><i class="fa fa-circle-o-notch"></i>
					<div class="name">fa-circle-o-notch</div></li>
				<li><i class="fa fa-circle-thin"></i>
					<div class="name">fa-circle-thin</div></li>
				<li><i class="fa fa-clipboard"></i>
					<div class="name">fa-clipboard</div></li>
				<li><i class="fa fa-clock-o"></i>
					<div class="name">fa-clock-o</div></li>
				<li><i class="fa fa-cloud"></i>
					<div class="name">fa-cloud</div></li>
				<li><i class="fa fa-cloud-download"></i>
					<div class="name">fa-cloud-download</div></li>
				
				<li><i class="fa fa-cny"></i>
					<div class="name">fa-cny</div></li>
				<li><i class="fa fa-code"></i>
					<div class="name">fa-code</div></li>
				<li><i class="fa fa-code-fork fa-codepen"></i>
					<div class="name">fa-code-fork fa-codepen</div></li>
				<li><i class="fa fa-coffee"></i>
					<div class="name">fa-coffee</div></li>
				<li><i class="fa fa-cog"></i>
					<div class="name">fa-cog</div></li>
				<li><i class="fa fa-cogs"></i>
					<div class="name">fa-cogs</div></li>
				<li><i class="fa fa-compass"></i>
					<div class="name">fa-compass</div></li>
				<li><i class="fa fa-columns"></i>
					<div class="name">fa-columns</div></li>
			
				<li><i class="fa fa-comment-o"></i>
					<div class="name">fa-comment-o</div></li>
				<li><i class="fa fa-comments-o"></i>
					<div class="name">fa-comments-o</div></li>
				<li><i class="fa fa-comments"></i>
					<div class="name">fa-comments</div></li>
				<li><i class="fa fa-compress"></i>
					<div class="name">fa-compress</div></li>
				<li><i class="fa fa-copy"></i>
					<div class="name">fa-copy</div></li>
				<li><i class="fa fa-credit-card"></i>
					<div class="name">fa-credit-card</div></li>

				<li><i class="fa fa-crop"></i>
					<div class="name">fa-crop</div></li>
				<li><i class="fa fa-crosshairs"></i>
					<div class="name">fa-crosshairs</div></li>
				<li><i class="fa fa-css3"></i>
					<div class="name">fa-css3</div></li>
				<li><i class="fa fa-cube"></i>
					<div class="name">fa-cube</div></li>

				<li><i class="fa fa-cubes"></i>
					<div class="name">fa-cubes</div></li>
				<li><i class="fa fa-cut"></i>
					<div class="name">fa-cut</div></li>
				<li><i class="fa fa-cutlery"></i>
					<div class="name">fa-cutlery</div></li>
				<li><i class="fa fa-dashboard"></i>
					<div class="name">fa-dashboard</div></li>

				<li><i class="fa fa-database"></i>
					<div class="name">fa-database</div></li>
				<li><i class="fa fa-dedent"></i>
					<div class="name">fa-dedent</div></li>
				<li><i class="fa fa-delicious"></i>
					<div class="name">fa-delicious</div></li>
				<li><i class="fa fa-desktop"></i>
					<div class="name">fa-desktop</div></li>

				<li><i class="fa fa-deviantart"></i>
					<div class="name">fa-deviantart</div></li>
				<li><i class="fa fa-digg"></i>
					<div class="name">fa-digg</div></li>
				<li><i class="fa fa-dollar"></i>
					<div class="name">fa-dollar</div></li>
				<li><i class="fa fa-dot-circle-o"></i>
					<div class="name">fa-dot-circle-o</div></li>

				
				<li><i class="fa fa-dribbble"></i>
					<div class="name">fa-dribbble</div></li>
				<li><i class="fa fa-dropbox"></i>
					<div class="name">fa-dropbox</div></li>
				<li><i class="fa fa-drupal"></i>
					<div class="name">fa-drupal</div></li>

				<li><i class="fa fa-eject"></i>
					<div class="name">fa-eject</div></li>
				<li><i class="fa fa-ellipsis-h"></i>
					<div class="name">fa-ellipsis-h</div></li>
				<li><i class="fa fa-ellipsis-v"></i>
					<div class="name">fa-ellipsis-v</div></li>

			
				<li><i class="fa fa-empire"></i>
					<div class="name">fa-empire</div></li>
				<li><i class="fa fa-envelope"></i>
					<div class="name">fa-envelope</div></li>
				<li><i class="fa fa-envelope-square"></i>
					<div class="name">fa-envelope-square</div></li>


				<li><i class="fa fa-eraser"></i>
					<div class="name">fa-eraser</div></li>
				<li><i class="fa fa-eur"></i>
					<div class="name">fa-eur</div></li>
				<li><i class="fa fa-euro"></i>
					<div class="name">fa-euro</div></li>
				<li><i class="fa fa-exchange"></i>
					<div class="name">fa-exchange</div></li>


				<li><i class="fa fa-exclamation"></i>
					<div class="name">fa-exclamation</div></li>
				<li><i class="fa fa-exclamation-circle"></i>
					<div class="name">fa-exclamation-circle</div></li>
				<li><i class="fa fa-exclamation-triangle"></i>
					<div class="name">fa-exclamation-triangle</div></li>
				<li><i class="fa fa-expand"></i>
					<div class="name">fa-expand</div></li>


				<li><i class="fa fa-external-link"></i>
					<div class="name">fa-external-link</div></li>
				<li><i class="fa fa-external-link-square"></i>
					<div class="name">fa-external-link-square</div></li>
				<li><i class="fa fa-eye"></i>
					<div class="name">fa-eye</div></li>
				<li><i class="fa fa-eye-slash"></i>
					<div class="name">fa-eye-slash</div></li>



				<li><i class="fa fa-facebook"></i>
					<div class="name">fa-facebook</div></li>
				<li><i class="fa fa-facebook-square"></i>
					<div class="name">fa-facebook-square</div></li>
				<li><i class="fa fa-fast-backward"></i>
					<div class="name">fa-fast-backward</div></li>

				<li><i class="fa fa-fast-forward"></i>
					<div class="name">fa-fast-forward</div></li>
				<li><i class="fa fa-fax"></i>
					<div class="name">fa-fax</div></li>
				<li><i class="fa fa-female"></i>
					<div class="name">fa-female</div></li>
				<li><i class="fa fa-fighter-jet"></i>
					<div class="name">fa-fighter-jet</div></li>


	<div class="name">fa-child</div></li>
					
				<li><i class="fa fa-filter"></i>
					<div class="name">fa-filter</div></li>
					
					
				<li><i class="fa fa-file-archive-o"></i>
					<div class="name">fa-file-archive-o</div></li>
				<li><i class="fa fa-file-audio-o"></i>
					<div class="name">fa-file-audio-o</div></li>
				<li><i class="fa fa-file-code-o"></i>
					<div class="name">fa-file-code-o</div></li>


				<li><i class="fa fa-file-excel-o"></i>
					<div class="name">fa-file-excel-o</div></li>
				<li><i class="fa fa-file-image-o"></i>
					<div class="name">fa-file-image-o</div></li>
				<li><i class="fa fa-file-movie-o"></i>
					<div class="name">fa-file-movie-o</div></li>
				<li><i class="fa fa-file-o"></i>
					<div class="name">fa-file-o</div></li>


				<li><i class="fa fa-file-pdf-o"></i>
					<div class="name">fa-file-pdf-o</div></li>
				<li><i class="fa fa-file-photo-o"></i>
					<div class="name">fa-file-photo-o</div></li>
				<li><i class="fa fa-file-picture-o"></i>
					<div class="name">fa-file-picture-o</div></li>
				<li><i class="fa fa-file-powerpoint-o"></i>
					<div class="name">fa-file-powerpoint-o</div></li>


				<li><i class="fa fa-file-sound-o"></i>
					<div class="name">fa-file-sound-o</div></li>
				<li><i class="fa fa-file-text"></i>
					<div class="name">fa-file-text</div></li>
				<li><i class="fa fa-file-text-o"></i>
					<div class="name">fa-file-text-o</div></li>
				<li><i class="fa fa-file-video-o"></i>
					<div class="name">fa-file-video-o</div></li>


				<li><i class="fa fa-flickr"></i>
					<div class="name">fa-flickr</div></li>
				
				
				
			

				<li><i class="fa fa-file-word-o"></i>
					<div class="name">fa-file-word-o</div></li>
				<li><i class="fa fa-file-zip-o"></i>
					<div class="name">fa-file-zip-o</div></li>
				<li><i class="fa fa-files-o"></i>
					<div class="name">fa-files-o</div></li>
				<li><i class="fa fa-film"></i>
					<div class="name">fa-film</div></li>
				
				<li><i class="fa fa-align-right"></i>
					<div class="name">fa-align-right</div></li>
				<li><i class="fa fa-adjust"></i>
					<div class="name">fa-adjust</div></li>
				<li><i class="fa fa-adn"></i>
					<div class="name">fa-adn</div></li>
				<li><i class="fa fa-align-center"></i>
					<div class="name">fa-align-center</div></li>
				
				<li><i class="fa fa-align-left"></i>
					<div class="name">fa-align-left</div></li>
				<li><i class="fa fa-ambulance"></i>
					<div class="name">fa-ambulance</div></li>
				<li><i class="fa fa-anchor"></i>
					<div class="name">fa-anchor</div></li>
				<li><i class="fa fa-android"></i>
					<div class="name">fa-android</div></li>
				

				<li><i class="fa fa-angle-double-down"></i>
					<div class="name">fa-angle-double-down</div></li>
				<li><i class="fa fa-angle-double-left"></i>
					<div class="name">fa-angle-double-left</div></li>
				<li><i class="fa fa-angle-double-right"></i>
					<div class="name">fa-angle-double-right</div></li>
				<li><i class="fa fa-angle-double-up"></i>
					<div class="name">fa-angle-double-up</div></li>
				<li><i class="fa fa-angle-down"></i>
					<div class="name">fa-angle-down</div></li>
				<li><i class="fa fa-angle-left"></i>
					<div class="name">fa-angle-left</div></li>
				<li><i class="fa fa-angle-right"></i>
					<div class="name">fa-angle-right</div></li>
				<li><i class="fa fa-angle-up"></i>
					<div class="name">fa-angle-up</div></li>
				<li><i class="fa fa-apple"></i>
					<div class="name">fa-apple</div></li>
				<li><i class="fa fa-archive"></i>
					<div class="name">fa-archive</div></li>
				<li><i class="fa fa-arrow-circle-down"></i>
					<div class="name">fa-arrow-circle-down</div></li>
				<li><i class="fa fa-arrow-circle-left"></i>
					<div class="name">fa-arrow-circle-left</div></li>
				<li><i class="fa fa-arrow-circle-right"></i>
					
					<div class="name">fa-arrow-circle-up</div></li>
				<li><i class="fa fa-arrow-circle-o-left"></i>
					<div class="name">fa-arrow-circle-o-left</div></li>
				<li><i class="fa fa-arrow-circle-o-down"></i>
					<div class="name">fa-arrow-circle-o-down</div></li>
				
				<li><i class="fa fa-arrow-down"></i>
					<div class="name">fa-arrow-down</div></li>
				<li><i class="fa fa-arrow-left"></i>
					<div class="name">fa-arrow-left</div></li>
				<li><i class="fa fa-arrow-right"></i>
					<div class="name">fa-arrow-right</div></li>
				<li><i class="fa fa-arrow-up"></i>
					<div class="name">fa-arrow-up</div></li>
				<li><i class="fa fa-arrows"></i>
				
					<div class="name">fa-arrows-alt</div></li>
				<li><i class="fa fa-arrows-h"></i>
					<div class="name">fa-arrows-h</div></li>
				<li><i class="fa fa-arrows-h"></i>
					<div class="name">fa-arrows-h</div></li>
				<li><i class="fa fa-arrows-v"></i>
					<div class="name">fa-arrows-v</div></li>
				
				<li><i class="fa fa-automobile"></i>
					<div class="name">fa-automobile</div></li>
				<li><i class="fa fa-backward"></i>
					<div class="name">fa-backward</div></li>
				<li><i class="fa fa-bank"></i>
					<div class="name">fa-bank</div></li>
				<li><i class="fa fa-bar-chart-o"></i>
					<div class="name">fa-bar-chart-o</div></li>
				<li><i class="fa fa-barcode fa-bars"></i>
					<div class="name">fa-barcode fa-bars</div></li>
				<li><i class="fa fa-beer"></i>
					<div class="name">fa-beer</div></li>
				<li><i class="fa fa-behance"></i>
					<div class="name">fa-behance</div></li>
				<li><i class="fa fa-behance-square"></i>
					<div class="name">fa-behance-square</div></li>
				<li><i class="fa fa-bell"></i>
					<div class="name">fa-bell</div></li>
				
				<li><i class="fa fa-bitbucket"></i>
					<div class="name">fa-bitbucket</div></li>
				<li><i class="fa fa-bitbucket-square"></i>
					<div class="name">fa-bitbucket-square</div></li>
				<li><i class="fa fa-bitcoin"></i>
					<div class="name">fa-bitbucket-square</div></li>
				<li><i class="fa fa-bold"></i>
					<div class="name">fa-bold</div></li>
				<li><i class="fa fa-bolt"></i>
					<div class="name">fa-bolt</div></li>
				<li><i class="fa fa-bomb"></i>
					<div class="name">fa-bomb</div></li>
				
				
				<li><i class="fa fa-bookmark-o"></i>
					<div class="name">fa-bookmark-o</div></li>
				<li><i class="fa fa-briefcase"></i>
					<div class="name">fa-briefcase</div></li>
				<li><i class="fa fa-btc"></i>
					<div class="name">fa-btc</div></li>
			
				<li><i class="fa fa-building"></i>
					<div class="name">fa-building</div></li>
				<li><i class="fa fa-building-o"></i>
					<div class="name">fa-building-o</div></li>
				<li><i class="fa fa-bullhorn"></i>
					<div class="name">fa-bullhorn</div></li>
				<li><i class="fa fa-bullseye"></i>
					<div class="name">fa-bullseye</div></li>
				<li><i class="fa fa-cab"></i>
					<div class="name">fa-cab</div></li>
				
				<li><i class="fa fa-car"></i>
					<div class="name">fa-car</div></li>
				<li><i class="fa fa-calendar-o"></i>
					<div class="name">fa-calendar-o</div></li>
				
				<li><i class="fa fa-camera-retro"></i>
					<div class="name">fa-camera-retro</div></li>
				<li><i class="fa fa-camera-retro"></i>
					<div class="name">fa-camera-retro</div></li>
				

				<li><i class="fa fa-file-excel-o"></i>
					<div class="name">fa-file-excel-o</div></li>
				<li><i class="fa fa-file-image-o"></i>
					<div class="name">fa-file-image-o</div></li>
				<li><i class="fa fa-file-movie-o"></i>
					<div class="name">fa-file-movie-o</div></li>
				<li><i class="fa fa-file-o"></i>
					<div class="name">fa-file-o</div></li>

				<li><i class="fa fa-fire"></i>
					<div class="name">fa-fire</div></li>
				<li><i class="fa fa-fire-extinguisher"></i>
					<div class="name">fa-fire-extinguisher</div></li>
				<li><i class="fa fa-flag"></i>
					<div class="name">fa-flag</div></li>


				<li><i class="fa fa-flag-checkered"></i>
					<div class="name">fa-flag-checkered</div></li>
				<li><i class="fa fa-flag-o"></i>
					<div class="name">fa-flag-o</div></li>
				<li><i class="fa fa-flash"></i>
					<div class="name">fa-flash</div></li>
				<li><i class="fa fa-flask"></i>
					<div class="name">fa-flask</div></li>

			</ul>
		</div>
	</div>
</body>
<script>

</script>
</html>
